<template>
  <div class="cloudTiming">
    <!-- <c-title :hide="false" text="云定时"></c-title> -->
    <div class="desc">
      <backBtn :icon='true'></backBtn>
      请设置开机时间</div>
    <div class="timeBox">
      <van-field v-model="currentDate" right-icon="clock-o" readonly placeholder="请选择" @click="show = true">
        <div class="label_left" slot="label">开机时间</div>
      </van-field>
      <div class="line">
        <div class="line_left">定时开机</div>
        <van-switch size="20px" v-model="checked" active-color="#015EF5" inactive-color="#D6D6DC" />
      </div>
      <div class="line" v-if="checked">
        <div class="line_left" style="flex-shrink: 0; margin-right: 2.5rem;">
          运行时间(小时)
        </div>
        <van-field v-model="severTime" input-align="right" readonly placeholder="请选择运行时间(小时)" @click="show2 = true"> </van-field>
      </div>
      <div class="line line_f_c">
        <div class="line_t">
          <div class="line_t_left">重复方式</div>
          <van-radio-group v-model="radio">
            <div class="line_t_right">
              <van-radio name="0" style="margin-right: 0.625rem;">单次</van-radio>
              <van-radio name="1">重复</van-radio>
            </div>
          </van-radio-group>
        </div>
        <div class="line_b" v-if="radio == '1'">
          <div class="cell" v-for="item in 7" :key="item" @click="addStartDay(item, 'start')">
            <div class="txt">每周{{ conversion(item) }}</div>
            <img v-if="checkArrayInd(item, 'start')" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2F721%402x.png" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="desc">请设置关机时间</div>
    <div class="timeBox">
      <van-field v-model="currentDate_end" right-icon="clock-o" readonly placeholder="请选择" @click="show1 = true">
        <div class="label_left" slot="label">关机时间</div>
      </van-field>
      <div class="line">
        <div class="line_left">定时关机</div>
        <van-switch size="20px" v-model="checked_end" active-color="#015EF5" inactive-color="#D6D6DC" />
      </div>
      <div class="line line_f_c">
        <div class="line_t">
          <div class="line_t_left">重复方式</div>
          <van-radio-group v-model="radio_end">
            <div class="line_t_right">
              <van-radio name="0" style="margin-right:0.625rem;">单次</van-radio>
              <van-radio name="1">重复</van-radio>
            </div>
          </van-radio-group>
        </div>
        <div class="line_b" v-if="radio_end == '1'">
          <div class="cell" v-for="item in 7" :key="item" @click="addStartDay(item, 'end')">
            <div class="txt">每周{{ conversion(item) }}</div>
            <img v-if="checkArrayInd(item, 'end')" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FdrinkMachind%2F721%402x.png" alt="" />
          </div>
        </div>
      </div>
    </div> -->

    <div class="psbox set-pc-style" :class="[fun.isIphoneX() ? 'iphoneXStyle' : '']">
      <div class="btn" @click="saveBtn">保存</div>
    </div>
    <van-popup v-model="show2" round position="bottom" :style="{ height: '50%' }">
      <van-picker title="运行时间" show-toolbar :columns="columns" @confirm="onConfirm_time" @cancel="onCancel_time" />
    </van-popup>
    <van-popup v-model="show" round position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker v-model="currentDate" type="time" title="选择时间" @confirm="onConfirm" @cancel="show = false" />
    </van-popup>
    <van-popup v-model="show1" round position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker v-model="currentDate_end" type="time" title="选择时间" @confirm="onConfirm_end" @cancel="show1 = false" />
    </van-popup>
  </div>
</template>
<script>
import backBtn from './components/backBtn.vue'
export default {
  data() {
    return {
      show: false,
      show1: false,
      currentDate: "",
      currentDate_end: "",
      checked: false,
      checked_end: false,
      radio: "0",
      radio_end: "0",
      repeatStartArr: [],
      repeatEndArr: [],
      columns: ["1", "2", "3", "4", "5", "6", "7", "8"],
      show2: false,
      severTime: ""
    };
  },
  computed: {
    conversion(num) {
      return function(num) {
        let txt = "";
        switch (num) {
          case 1:
            txt = "日";
            break;
          case 2:
            txt = "一";
            break;
          case 3:
            txt = "二";
            break;
          case 4:
            txt = "三";
            break;
          case 5:
            txt = "四";
            break;
          case 6:
            txt = "五";
            break;
          case 7:
            txt = "六";
            break;
          default:
            break;
        }
        return txt;
      };
    },
    checkArrayInd(item, key) {
      return function(item, key) {
        let arr;
        if (key == "start") {
          arr = this.repeatStartArr;
        } else {
          arr = this.repeatEndArr;
        }
        if (arr.length <= 0) return false;
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] == item) {
            return true;
          }
        }
      };
    }
  },
  activated() {
    this.init();
    this.machineDetail(this.$route.params.machine_id);
    console.log(this.currentDate, this.currentDate_end);
  },
  components:{backBtn},
  methods: {
    init() {
      this.show = false;
      this.currentDate = "";
      this.checked = false;
      this.radio = "0";
      this.repeatStartArr = [];
    },
    machineDetail(id) {
      $http.post("plugin.drink-machine.frontend.machine.machineDetail", { machine_id: id }, "加载中...").then(res => {
        if (res.result == 1) {
          let detailInfo = res.data.start_data;
          console.log(detailInfo);
          this.checked = detailInfo.status == 1 ? true : false;
          this.currentDate = `${detailInfo.hour < 10 ? "0" + detailInfo.hour : detailInfo.hour}:${detailInfo.min < 10 ? "0" + detailInfo.min : detailInfo.min}`;
          this.radio = String(detailInfo.is_repeat);
          this.repeatStartArr = detailInfo.week_days;
          this.severTime = detailInfo.run_hour;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    onConfirm_time(e) {
      this.severTime = e;
      this.show2 = false;
    },
    onCancel_time() {},
    saveBtn() {
      console.log(this.fun.isTextEmpty(this.currentDate));
      if (this.fun.isTextEmpty(this.currentDate)) {
        this.$toast("请选择开机时间");
        return;
      }
      if (this.checked) {
        if (this.fun.isTextEmpty(this.severTime)) {
          this.$toast("请选择运行时间");
          return;
        }
      }
      let json = {
        machine_id: this.$route.params.machine_id,
        start_data: {
          status: this.checked,
          is_repeat: this.radio,
          week_days: this.repeatStartArr,
          hour: Number(this.currentDate.split(":")[0]),
          min: Number(this.currentDate.split(":")[1]),
          run_hour: Number(this.severTime)
        }
      };
      $http.post("plugin.drink-machine.frontend.air.setAuto", json, "加载中...").then(res => {
        if (res.result == 1) {
          this.$dialog
            .alert({
              message: res.msg
            })
            .then(() => {
              this.$router.go(-1);
            });
        } else {
          this.$toast(res.msg);
        }
      });
    },
    addStartDay(item, key) {
      let arr;
      if (key == "start") {
        arr = this.repeatStartArr;
      } else {
        arr = this.repeatEndArr;
      }
      if (arr.indexOf(item) != -1) {
        let ind = arr.indexOf(item);
        arr.splice(ind, 1);
      } else {
        arr.push(item);
      }
      arr.sort();
      console.log(arr);
      if (key == "start") {
        this.repeatStartArr = arr;
      } else {
        this.repeatEndArr = arr;
      }
    },
    onConfirm(e) {
      console.log(this.currentDate);
      this.show = false;
    },
    onConfirm_end(e) {
      console.log(this.currentDate_end);
      this.show1 = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.iphoneXStyle {
  padding-bottom: 34px;
}

.cloudTiming {
  padding-bottom: 5rem;
}

.psbox {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0.8rem 0.75rem;
  background: #fff;
  width: 100%;

  .btn {
    margin: 0 0.75rem;
    height: 2.5rem;
    background: #015ef5;
    border-radius: 1.25rem;
    text-align: center;
    line-height: 2.5rem;
    font-weight: 500;
    font-size: 0.88rem;
    color: #fff;
    margin: 0 auto;
  }
}

.line {
  display: flex;
  align-items: center;
  padding: 1.06rem 0.72rem;
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  background: #fff;
  border-radius: 0.75rem;

  .van-cell {
    padding: 0 !important;
  }

  .line_t {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .line_t_right {
      display: flex;
    }
  }

  .line_b {
    width: 100%;
    padding: 0 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .cell {
      padding: 0.69rem 0 0.69rem 0;
      border-bottom: 1px solid #d6d6dc;
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 1rem;
        height: 1rem;
        margin: 0;
      }
    }

    .cell:last-child {
      border-bottom: none;
    }
  }
}

.line_f_c {
  flex-direction: column;
}

.desc {
  margin: 0.84rem 0.75rem;
  font-size: 0.94rem;
  text-align: left;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.timeBox {
  margin: 0 0.75rem;
  // padding: 0.91rem 0.75rem 2.22rem 0.75rem;
  // padding-top: 0.91rem;
  // padding-bottom: 2.22rem;
  .van-cell {
    border-radius: 0.75rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    padding-left: 0.72rem;
  }

  .label_left {
    font-weight: 500;
    color: #00001c;
    font-size: 0.88rem;
  }

  .timeBox_t {
    font-size: 0.88rem;
    font-weight: 500;
    color: #00001c;
    text-align: left;
  }
}

.selectStart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.5rem;
  border: 0.03rem solid #d6d6dc;
  height: 2.5rem;
  background: #fff;
  margin: 0.75rem 0;
  padding: 0 0.69rem;
  color: #d6d6dc;
}
</style>
